<template>
  <div class="houseitem-content" @click="todetail">
    <div class="houseimg">
      <van-image width="90" height="90" lazy-load :src="imgPath" fit="cover">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
    </div>
    <div class="houseInfo">
      <div class="houseName">
        <!-- isShelf: 是否已下架 -->
        <span v-if="houseItem.isShelf == 1" 
          :class="{ rentout_box : houseItem.isRent == 1 , noRentout_box : houseItem.isRent == 2}"
        >
          {{houseItem.isRent | rentState}}
          </span> 
        <slot name="state"></slot>
        <slot name="title"></slot>
        <slot name="ishot"></slot>
        <slot name="isshelf"></slot>
        <div class="cancel-collect-box">
          <slot name="cancelcollect"></slot>
        </div>
      </div>
      <div class="addr">
        <span>{{houseItem.province}}</span>
        <span>{{houseItem.city}}</span>
        <span>{{houseItem.region}}</span>
        <span>
          建面 {{houseItem.area}}m
          <sup>2</sup>
        </span>
      </div>
      <div class="price">
        <p>
          <span>￥{{houseItem.price | priceSubstr}}</span>
          <slot name="publicTime"></slot>
        </p>
      </div>
      <div class="detailInfo">
        <span>{{houseItem.isCommercial | commercialState}}</span>
        <span>{{houseItem.direction | derectionState}}</span>
        <span>{{houseItem.isToilet | toiletState}}</span>
        <span>{{houseItem.floor}}层</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  methods: {
    todetail() {
      this.$emit("todetail");
    },
  },
  props: {
    houseItem: {
      type: Object,
      default: () => {},
    },
    imgPath: {
      type: String,
      default: "",
    },
  },
  filters: {
    rentState(val) {
      return val == "1" ? "已售" : "待售";
    },
    priceSubstr(val) {
      return (val - 0).toFixed(2);
    },
    commercialState(val) {
      return val == 1 ? "商住" : "民住";
    },
    toiletState: function (val) {
      return val == 1 ? "独卫" : "非独卫";
    },
    derectionState(val) {
      return val == 1
        ? "朝东"
        : val == 2
        ? "朝南"
        : val == 3
        ? "朝西"
        : val == 4
        ? "朝北"
        : val == 5
        ? "东南"
        : val == 6
        ? "东北"
        : val == 7
        ? "西南"
        : "西北";
    },
  },
};
</script>

<style scoped>
.houseitem-content {
  display: flex;
  height: 105px;
  margin: 15px 15px 0 15px;
  border-bottom: 1px solid #eee;
}
.houseimg .van-image {
  height: 90px;
  width: 90px;
  margin-right: 15px;
}
.houseInfo {
  flex: 1;
}
.houseInfo span {
  margin-right: 2px;
}
.houseInfo > div {
  margin-bottom: 8px;
}
.houseName {
  position: relative;
}
.houseName span:nth-child(1) {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
}
/* 售出的显示 */
.rentout_box {
  background: #ff5654;
}
/* 未售出的显示 */
.noRentout_box {
  background-color: #4ACA6D;
}
.addr {
  font-size: 12px;
}
.price {
  color: #ff5654;
  font-size: 14px;
}
.price > p {
  display: flex;
  justify-content: space-between;
}
.price > p span {
  flex: 1;
}
.price span {
  font-size: 12px;
  margin-right: 1px;
}
.detailInfo span {
  padding: 1px 2px;
  border: 1px solid #ccc;
  font-size: 12px;
}
.cancel-collect-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
}
</style>